<!--主页面框架包含搜索表单框，表格，分页-->
<template>
  <div>
    <div v-if="!isOperationPage" class="hry-content-wrapper">
      <!--search-->
      <div class="search-wrapper" v-if="isPC">
        <hry-search
          :searchList="searchList"
          :needSearchBtn="setting.needSearchBtn"
          :needResetBtn="setting.needResetBtn"
          :needDownloadBtn="setting.needDownloadBtn"
          @formValue="getFormValue"
        ></hry-search>
      </div>
      <div  class="hry-title">
        <h1>{{ breadcrumbList[breadcrumbList.length - 1].name }}</h1>
        <div v-if="isPC">
          <slot name="searchLeft"> </slot>
        </div>
      </div>
      <!--table表单-->
      <div class="table" ref="table">
        <hry-table
          :columns="tableInfo.columns"
          :dataSource="dataSource"
          :needSelect="tableInfo.needSelect"
          :pagination="tableInfo.pagination"
          @changeTable="changeTable"
          @changeOpt="changeOpt"
        ></hry-table>
      </div>
      <!--弹出框-->
      <slot></slot>
    </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  components: {
    hrySearch: () => import("@/components/search/index"),
    hryTable: () => import("@/components/table/index")
  },
  props: {
    tableList: {
      type: Object
    },
    searchList: {
      type: Array
    },
    setting: {
      type: Object
    }
  },
  data() {
    return {
      tableInfo: {},
      dataSource: []
    };
  },
  methods: {
    changeTable(pagination, filters, sorter) {
      this.$emit("changeTable", pagination, filters, sorter);
    },
    changeOpt(item, type) {
      this.$emit("changeOpt", item, type);
    },
    getFormValue(values) {
      this.$emit("formValue", values);
    }
  },
  computed: {
    ...mapState(["isPC"]),
    breadcrumbList() {
      return this.$store.state.currentBreadcrumb;
    },
    isOperationPage() {
      return this.$store.state.isOperationPage;
    }
  },
  watch: {
    tableList: {
      handler() {
        Object.assign(
          this.tableInfo,
          JSON.parse(JSON.stringify(this.tableList))
        );
        this.dataSource = JSON.parse(JSON.stringify(this.tableList.dataSource));
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped lang="less">
.hry-title {
  font-weight: bold;
  color: #333333;
  padding: 0 10px;
  line-height: 65px;
  .flex_content();
  .flex_justify_space();
}
.hry-content-wrapper {
  .search-wrapper {
    .flex_content();
    background-color: @white;
    padding: 16px;
    box-shadow: 5px 6px 5px #dcdcdc;
    border-radius: 6px;
  }
  .table{
    background-color: @white;
    padding: 16px;
    box-shadow: 10px 10px 10px #dcdcdc;
    border-radius: 6px;
  }
}
</style>
